/*
* Copyright (c) 2025 Huawei Device Co., Ltd.
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to deal
* in the Software without restriction, including but not limited to the rights
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to provide persons with access to the Software
* subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in all
* copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGE OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
* SOFTWARE.
*/

<template>
  <div class='categories'>
    <MultiGridVue
      :columnsTemplate='columnsTemplate'
      :onGridItemClick='pageJump'
      gridRowGap='10px'
      gridColumnGap='10px'
    >
      <GridItemVue
        class='categories-item'
        v-for='item in categoriesItems'
        :name='item.name'
        :key='item.id'
      >
        <img :src='item.imgSrc' />
        <span>{{ item.name }}</span>
      </GridItemVue>
    </MultiGridVue>
  </div>
</template>

<script>
import { MultiGridVue, GridItemVue } from 'web-multidevice-advanced-vue2/src';
import { breakpointManager } from '../../utils/breakpointInit';

export default {
  name: 'CategoriesView',
  data() {
    return {
      categoriesItems: [
        {
          id: 1,
          name: this.$t('categories.smartOffice'),
          imgSrc: require('../../assets/categories_1.png'),
        },
        {
          id: 2,
          name: this.$t('categories.smartHome'),
          imgSrc: require('../../assets/categories_2.png'),
        },
        {
          id: 3,
          name: this.$t('categories.huaweiPhone'),
          imgSrc: require('../../assets/categories_3.png'),
        },
        {
          id: 4,
          name: this.$t('categories.entertainment'),
          imgSrc: require('../../assets/categories_4.png'),
        },
        {
          id: 5,
          name: this.$t('categories.sportsHealth'),
          imgSrc: require('../../assets/categories_5.png'),
        },
        {
          id: 6,
          name: this.$t('categories.aitoCar'),
          imgSrc: require('../../assets/categories_6.png'),
        },
        {
          id: 7,
          name: this.$t('categories.huaweiSmartSelection'),
          imgSrc: require('../../assets/categories_7.png'),
        },
        {
          id: 8,
          name: this.$t('categories.hongmengZhilian'),
          imgSrc: require('../../assets/categories_8.png'),
        },
        {
          id: 9,
          name: this.$t('categories.enterpriseCommercial'),
          imgSrc: require('../../assets/categories_9.png'),
        },
        {
          id: 10,
          name: this.$t('categories.wholeHouseIntelligence'),
          imgSrc: require('../../assets/categories_10.png'),
        },
      ],
      columnsTemplate: '1fr 1fr 1fr 1fr 1fr',
    };
  },
  components: {
    MultiGridVue,
    GridItemVue,
  },
  methods: {
    pageJump() {
      this.$router.push('detail_pay');
    },
  },
  mounted() {
    this.unsubscribe = breakpointManager.subscribeToBreakpoint(() => {
      this.columnsTemplate = breakpointManager.useBreakpointValue({
        xs: '1fr 1fr 1fr 1fr 1fr',
        sm: '1fr 1fr 1fr 1fr 1fr',
        md: '1fr 1fr 1fr 1fr 1fr 1fr 1fr',
        lg: '1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr',
        xl: '1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr',
      });
    });
  },
  beforeDestroy() {
    if (this.unsubscribe) {
      this.unsubscribe();
    }
  },
};
</script>

<style lang='less' scoped>
@import './index.less';
</style>